<!DOCTYPE HTML>
<html>
<head>
    <title>Error</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <script src="/scripts/jquery.min.js"></script>
    <link rel="stylesheet" href="/scripts/miniui/themes/default/miniui.css">
    <link rel="stylesheet" href="/scripts/miniui/themes/icons.css">
    <link rel="stylesheet" href="/scripts/miniui/themes/bootstrap/skin.css">
    <script src="/scripts/miniui/miniui.js"></script>
</head>
<style>
    .canvas-box{ float: right; width: 400px; height: 400px;top:15px; position: relative;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none }
    .canvas-box .overlay{ position: absolute; left: 0; top: 0; cursor: move;border:1px solid #69f;}
    .canvas-box div,.canvas-box canvas{-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}
</style>
<body>
<div id="form1" style="width: 300px;float: left">
    <span style="width:80px;display:inline-block;">微信群名：</span>
    <input id="name" name="name" class="mini-textbox" required="true" style="width:155px;"  value="<%=result.data[0].name%>" />
    <br/><br/>
    <span style="width:80px;display:inline-block;">二维码：</span>
    <input type="file" style="width: 155px" value="select img" id="ipt" value="选择图片">
    <input id="objectId" name="objectId" class="mini-textbox"  style="display: none"  value="<%=result.data[0].objectId%>" />
    <div style="padding-top: 20px;text-align: center">
        <input type="button" id="save" value="保存" >
        <input type="button" onclick="onCancel()" id="onCancel" value="取消" >
    </div>
</div>

    <div class="canvas-box"></div>
</body>
<script src="/uploadImg/zm-canvas-crop.js"></script>
<script>
    mini.parse();
    function saveCallBack(base64) {
        var name=mini.get("name").getValue();
        var objectId=mini.get("objectId").getValue();
        var form = new mini.Form("#form1");
        form.validate();
        if (form.isValid() == false) {
            alert("请正确填写数据")
            return
        };
        form.loading("保存中");
        //最终把此base64传给后端
         $.ajax({
            type: "POST",
            url: "/getdata/wxGroup/add",
            data: {
                name:name,
                base64: base64,
                objectId:objectId
            },
             success: function (result) {
                 if(result==1){
                     CloseWindow("save");
                 }else{
                     alert("更改失败");
                     CloseWindow("save");
                 }
             }
        })

    }

    var c = new ZmCanvasCrop({
        fileInput: $('#ipt')[0],
        saveBtn: $('#save')[0],
        box_width: 600,  //剪裁容器的最大宽度
        box_height: 400, //剪裁容器的最大高度
        min_width: 300,  //要剪裁图片的最小宽度
        min_height: 300  //要剪裁图片的最小高度
    }, saveCallBack);

    function CloseWindow(action) {
        if (action == "close" && form.isChanged()) {
            if (confirm("数据被修改了，是否先保存？")) {
                return false;
            }
        }
        if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action);
        else window.close();
    }
    function onOk(e) {
        SaveData();
    }
    function onCancel(e) {
        CloseWindow("cancel");
    }
</script>
</html>